<template>
  <div class="h-100">
      <el-page-header
        @back="goBack"
        :content="this.$store.state.titleName"
        class="f-16 p-20"
      ></el-page-header>

      <div class="p-50 p-t-20 h-100 o-y-auto">


  <div class="f j-e">
    <div v-if="tableData">
      <el-button type="primary" @click="editCont(1)">编辑内容</el-button>
      <el-button type="primary" @click="delectArticle()">删除内容</el-button>
    </div>
    <el-button v-else type="primary" @click="editCont(0)">新增内容</el-button>
    </div>
    <div v-if="tableData">
    预览效果：
    <div class="m-t-20 p-15 m-auto" style="box-shadow: 0 0 15px #dedede;border-radius: 5px;" v-if="tableData.template">模板文件：{{tableData.template}}</div>
    <div class="m-t-20 p-15 m-auto" style="box-shadow: 0 0 15px #dedede;border-radius: 5px;min-height:500px;line-height:30px;" v-else v-html="tableData.details"></div>
    </div>
    <div v-else class="t-c p-t-50">请添加文章！</div>
  </div>


  </div>
</template>
<script>
import { queryArticleList, delectArticle } from "../http/api";
export default {
  name: "editList2_1",
  data() {
    return {
      tableData: ""
    };
  },

  created() {
    this.queryArticleList();
  },
  mounted() {},
  methods: {
    // 查询文章
    queryArticleList() {
      const data = {
        lableId: this.$store.state.columnId
      };
      queryArticleList(data).then(res => {
        console.log({ 文章列表: res });
        this.tableData = "";
        if (res.data.list && res.data.list.length > 0) {
          this.tableData = res.data.list[0];
        }
      });
    },

    // 删除文章
    delectArticle(id) {
      const data = {
        id: this.tableData.id
      };
      delectArticle(data).then(res => {
        console.log({ 删除文章: res });
        this.queryArticleList();
      });
    },

    // 编辑文章
    editCont(count) {
      this.$store.commit("setArticleId", this.tableData.id);
      if (count) {
        this.$store.commit("setIsAdd", false);
      } else {
        this.$store.commit("setIsAdd", true);
      }
      this.$router.push({
        path: "../page/editCont"
      });
    },
    // 返回上一页
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

